<template>
  <div>
      <!-- <img v-bind:src="require('../assets/img/user/' + this.uurl)"/> -->
      <img class="touxiang" :src="require('../assets/img/user/' + this.uurl)" />
      <!-- <img src="../../static/img/user/lADPDhmOv3TPxizNBKjNA34_894_1192.jpg_720x720q90g.jpg"/> -->
      <!-- <img src="../assets/img/user/lADPDhmOv3TPxizNBKjNA34_894_1192.jpg_720x720q90g.jpg"/> -->
      <img class="yuan" :src="require('../assets/img/user/' + this.uurl)" />
      <input name="uploadFile" type="file" accept="image/png,image/gif,image/jpeg" @change="update"/>
      <el-button type="warning" @click="edit">修改密码</el-button>
      <el-dialog
        title="修改密码"
        :visible.sync="editDialogVisible"
        width="50%"
        @close="editDialogClosed"
        >
        <!-- :rules="addFormRules" -->
        <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="100px" >
    <el-form-item label="第一次密码" prop="password">
    <el-input v-model="editForm.password" @blur="checkPass2"></el-input>
    </el-form-item>
    <el-form-item label="第二次密码" prop="password2">
    <el-input v-model="editForm.password2" @blur="checkPass2"></el-input>
    </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editUser">确 定</el-button>
  </span>
</el-dialog>
  </div>
</template>
<script>
export default {
  data () {
    return {
      uurl: 'logo.png',
      editFormRules: {
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          },
          {
            min: 6,
            max: 40,
            message: '用户名在6到40之间',
            trigger: 'blur'
          }
        ]
      },
      editDialogVisible: false,
      editForm: {
        password: '',
        password2: ''
      }
    }
  },
  computed: {
  },
  created () {
    this.getImg()
  },
  methods: {

    async update (e) {
      // var self = this
      // var file = e.target.files[0]
      // /* eslint-disable no-undef */

      // var config = {
      //   headers: {
      //     'Content-Type': 'multipart/form-data',
      //     'Access-Control-Allow-Origin': '*',
      //     'Access-Control-Allow-Credentials': 'true'
      //   }
      // }
      // const { data: res } = await this.$http.post('user/uploadUser', file, config)
      // if (res.status !== '200') {
      //   console.log('失败')
      // }
      // console.log(res)
      const file = e.target.files[0]
      const param = new FormData() // 创建form对象
      param.append('uploadFile', file)// 通过append向form对象添加数据
      console.log(param.get('file')) // FormData私有类对象，访问不到，可以通过get判断值是否传进去
      const config = {
        headers: { 'Content-Type': 'multipart/form-data' }
      } // 添加请求头
      await this.$http.get('user/deleteImg')
      const { data: res } = await this.$http.post('user/uploadUser', param, config)
      this.$message.success(res.message)
      this.getImg()
      location.reload()
    },
    async getImg () {
      const { data: res } = await this.$http.get('user/selectImg')
      if (res.status !== '200') {
        console.log('失败')
      }
      if (res.data !== null) {
        this.uurl = res.data
      }
    },
    editDialogClosed () {
      this.$refs.editFormRef.resetFields()
    },
    edit () {
      this.editDialogVisible = true
    },
    checkPass2 () {
      if (this.editForm.password2 !== '') {
        if (this.editForm.password !== this.editForm.password2) {
          return this.$message.error('两次密码不一致')
        }
      }
    },
    editUser () {
      this.$refs.editFormRef.validate(async valid => {
        if (!valid) return 0
        const { data: res } = await this.$http.post('user/updatePasswordTwo', this.editForm)
        if (res.data == null) {
          return this.$message.error(res.message)
        }
        this.$message.success('修改密码成功')
        if (res.status === '401') {
          window.sessionStorage.clear()
          this.$router.push('/login')
          this.$message.error(res.message)
        }
        this.editDialogVisible = false
      })
    }
  }
}
</script>
<style lang="less">
  .touxiang{
    width: 200px;
    height: 200px;
  }
  .yuan{
    width: 200px;
    height: 200px;
    border-radius: 50%;
  }
</style>
